<template>
  <!-- 考试管理-创建 -->
  <div class="add_msg">
    <div class="base_msg">
      <mytitle>考试名称</mytitle>
      <div>
        <el-input
          type="text"
          placeholder="请输入考试名称"
          v-model="eaxm_name"
          maxlength="30"
          show-word-limit
        >
        </el-input>
      </div>
    </div>

    <div class="base_msg">
      <mytitle>监考老师</mytitle>
      <div>
        <el-input
          type="text"
          placeholder="请输入监考老师"
          v-model="exma_teacher"
          maxlength="30"
          show-word-limit
        >
        </el-input>
      </div>
    </div>

    <!--考试时间  -->
    <div class="exam_time">
      <mytitle>考试时间</mytitle>
      <div class="block time_box">
        <div>
          <p>开始时间:</p>

          <el-date-picker
            v-model="start_value"
            type="date"
            format="yyyy-MM-dd"
            placeholder="选择日期"
          >
          </el-date-picker>
        </div>

        <div>
          <p>结束时间:</p>

          <el-date-picker
            v-model="end_value"
            type="date"
            format="yyyy-MM-dd"
            placeholder="选择日期"
          >
          </el-date-picker>
        </div>
      </div>
    </div>

    <!-- 选择考试人员 -->
    <div class="exam_people block">
      <mytitle>选择考试人员</mytitle>
      <div class="block">
        <el-select
          v-model="value1"
          multiple
          placeholder="请选择"
          @change="change_people"
        >
          <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.gradeName"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </div>
    </div>

    <!-- 考试类型 -->
    <div class="exam_type">
      <mytitle>考试类型</mytitle>
      <div>
        <el-select
          v-model="value3"
          placeholder="请选择"
          @change="change_exam_type"
        >
          <el-option
            v-for="item in options3"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
    </div>
    <!-- 项目设置 -->
    <div class="exam_set">
      <mytitle>项目设置</mytitle>
      <div>
        <!-- 体质 -->
        <div class="set_tizi">
          <p>体质</p>
          <div>
            <el-checkbox-group v-model="checkList">
              <el-checkbox
                :label="item.name"
                :value="item.id"
                v-for="(item, index) in tizhi_checkList"
                :key="index"
                @change="change_tizhi"
              ></el-checkbox>
            </el-checkbox-group>
          </div>
        </div>

        <!-- 体检 -->
        <div class="set_tijian">
          <p>体检</p>
          <div>
            <el-checkbox-group v-model="checkList1">
              <el-checkbox
                :label="item.name"
                :value="item.id"
                v-for="(item, index) in tijian_checkList"
                :key="index"
                @change="change_tijian"
              ></el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
      </div>
    </div>

    <!-- 按钮 -->
    <div class="exam_button">
      <p @click="clear_both">取消</p>
      <p @click="save_exam_details">确定发布</p>
    </div>
  </div>
</template>

<script>
import mytitle from '../../components/title'
import { getAllGardas, get_exam_type, add_exam_list } from '@/api/index'
import { removeTab } from '@/api/delTab.js'
export default {
  name: 'addMessage',
  components: {
    mytitle
  },
  data() {
    return {
      send_tizhi: [],
      send_tijian: [],
      options: [],//考试人员数组
      people_value: '',
      start_value: '',
      end_value: '',
      checkList: [],  //体质选中数组
      checkList1: [], //体检选中数组
      tizhi_checkList: [],//体质数组
      tijian_checkList: [],//体检数组
      value1: '',  //考试人员
      value3: '',
      text: '',
      textarea: '',
      show_kao: false,
      eaxm_name: '',  //考试名称
      exma_teacher: '', //教师名称
      exam_type: 0, //1国家 2类型
      send_class_arr: [],
      options3: [
        {
          value: '1',
          label: '国家体测'
        }, {
          value: '2',
          label: '课程技能'
        },
      ],
    }
  },
  created() {
    this.getClassTree();
    this.getExamtype();
    //  this.$store.commit('common/updateTitle', { url: 'sys-bill', type: this.$route.query.type })
  },
  methods: {
    clear_both() {
      removeTab(this.$store.state.common.mainTabsActiveName)
      this.send_tizhi = [],
        this.send_tijian = [],
        this.people_value = '',
        this.start_value = '',
        this.end_value = '',
        this.checkList = [],  //体质选中数组
        this.checkList1 = [], //体检选中数组
        this.value1 = '',  //考试人员
        this.value3 = '',
        this.text = '',
        this.textarea = '',
        this.show_kao = false,
        this.eaxm_name = '',  //考试名称
        this.exma_teacher = '', //教师名称
        this.exam_type = 0, //1国家 2类型
        this.send_class_arr = [];
    },
    handleChange(value) {
      console.log(value);
    },
    // 获取年级
    async getClassTree() {
      const res = await getAllGardas();
      console.log("年级列表", res);
      var arr = res.data.data;
      this.options = arr;

    },
    // 获取考试类型
    async getExamtype() {
      const queryParam = JSON.parse(sessionStorage.getItem('userMsg'))
      const res = await get_exam_type({
        orgId: queryParam.orgCode
      });
      console.log("项目设置", res);
      var arr = res.data.data[0].physicalDtos  //体质
      var brr = res.data.data[0].examineDtos  //体检
      this.tizhi_checkList = arr;
      this.tijian_checkList = brr;
    },

    // 保存新增
    async save_exam_details() {
      const queryParam = JSON.parse(sessionStorage.getItem('userMsg'));
      if (this.eaxm_name == '') {
        this.$message({
          type: 'warning',
          message: '请输入考试名称!'
        });
        return;
      }
      if (this.send_class_arr.length == 0) {
        this.$message({
          type: 'warning',
          message: '请选择考试人员!'
        });
        return;
      }
      if (this.exam_type == 0) {
        this.$message({
          type: 'warning',
          message: '请选择考试类型!'
        });
        return;
      }
      if (this.send_tijian.length == 0 && this.send_tizhi.length == 0) {
        this.$message({
          type: 'warning',
          message: '请选择项目设置!'
        });
        return;
      }
      if (this.start_value > this.end_value) {
        this.$message({
          type: 'warning',
          message: '开始时间不能大于结束时间!'
        });
        return;
      }
      var time1 = this.switchTimeFormat(this.start_value);
      var time2 = this.switchTimeFormat(this.end_value);

      const res = await add_exam_list({
        orgId: queryParam.orgCode,
        dateBegin: time1, //开始时间
        dateEnd: time2, //结束时间
        examineDtos: this.send_tijian,  //体检
        physicalDtos: this.send_tizhi,  //体质
        name: this.eaxm_name,  //考试名称
        type: this.exam_type,
        gradeDtos: this.send_class_arr

      })
      console.log('新增信息', res);
      if (res.data.errorCode == 0) {
        this.$message({
          type: 'success',
          message: '新增成功!'
        });
        setTimeout(() => {
          // this.$router.push({ path: '/achieventment' })
          removeTab(this.$store.state.common.mainTabsActiveName)
        }, 1000);
      } else {
        this.$message({
          type: 'error',
          message: '新增失败!'
        });
      }
    },
    switchTimeFormat(time) {
      const dateTime = new Date(time)
      const year = dateTime.getFullYear()
      const month = dateTime.getMonth() + 1
      const date = dateTime.getDate()
      return `${year}-${month}-${date}`
    },
    change_people(e) {
      console.log('选择考试年级', e);
      var arr = e;
      var brr = this.options;
      var crr = [];
      for (var i = 0; i <= arr.length; i++) {
        for (var n in brr) {
          arr[i] == brr[n].id ? crr.push(brr[n]) : ''
        }
      }
      this.send_class_arr = crr;
    },
    change_exam_type(e) {
      console.log('选择考试类型', e);
      this.exam_type = e;
    },
    change_tizhi(e) {
      console.log('多选体检', e, this.checkList1, this.tijian_checkList);


      var arr = this.checkList;
      var brr = this.tizhi_checkList;
      var crr = [];
      for (var i = 0; i < arr.length; i++) {
        for (var n in brr) {
          var obj = {};
          obj.id = brr[n].id;
          obj.name = brr[n].name;
          arr[i] == brr[n].name ? crr.push(obj) : ''
        }
      }

      console.log('发送体质数组', crr);
      this.send_tizhi = crr;


    },
    change_tijian(e) {
      console.log('多选体检', e, this.checkList1, this.tijian_checkList);
      var arr = this.checkList1;
      var brr = this.tijian_checkList;
      var crr = [];
      for (var i = 0; i < arr.length; i++) {
        for (var n in brr) {
          var obj = {};
          obj.id = brr[n].id;
          obj.name = brr[n].name;
          arr[i] == brr[n].name ? crr.push(obj) : ''
        }
      }
      console.log('发送体检数组', crr);
      this.send_tijian = crr;
    }
  },

  watch: {
    $route(val) {
      console.log(val, "333333333333333");
      var types = val.query.types;
      if (types == 1) {
        this.send_tizhi = [],
          this.send_tijian = [],
          this.people_value = '',
          this.start_value = '',
          this.end_value = '',
          this.checkList = [],  //体质选中数组
          this.checkList1 = [], //体检选中数组
          this.value1 = '',  //考试人员
          this.value3 = '',
          this.text = '',
          this.textarea = '',
          this.show_kao = false,
          this.eaxm_name = '',  //考试名称
          this.exma_teacher = '', //教师名称
          this.exam_type = 0, //1国家 2类型
          this.send_class_arr = [];
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.exam_button {
  padding: 0.1042rem;
  z-index: 2;
  position: fixed;
  right: 0.1302rem;
  bottom: 0;
  left: 1.9271rem;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  > p {
    padding: 0.0521rem 0.1302rem;
    font-size: 0.0833rem;
    color: #525252;
    border-radius: 5px;
    &:hover {
      cursor: pointer;
    }
  }
  > p:first-child {
    border: 1px solid #525252;
    margin-right: 0.1042rem;
  }
  > p:nth-of-type(2) {
    background-color: #0fdd8d;
    color: #fff;
    border: 1px solid #0fdd8d;
  }
}
.time_box {
  display: flex;
  align-items: center;
  > div {
    display: flex;
    align-items: center;
    margin-right: 0.1563rem;
    p {
      margin-right: 0.0521rem;
      font-size: 0.0729rem;
      color: #525252;
    }
  }
}
.close {
  width: 0.125rem;
}
.card_one {
  margin-bottom: 0.1042rem;
}
.add_msg {
  padding: 0.1979rem 0.1823rem;
  padding-bottom: 0.5208rem;
  background-color: #fff;
  border-radius: 0.0781rem;
  // 考试名称
  .base_msg {
    .el-input {
      margin-bottom: 0.224rem;
      width: 50%;
    }
    .el-input--medium .el-input__inner {
      background-color: #f7fbfc;
    }
  }
  // 考试时间
  .exam_time {
    margin-bottom: 0.224rem;
  }
  .exam_people {
    margin-bottom: 0.224rem;
    .el-cascader--medium {
      width: 100%;
    }
  }
  .exam_type {
    margin-bottom: 0.224rem;
  }
  .set_tizi {
    > p {
      font-size: 0.0938rem;
      color: #525252;
      margin-bottom: 0.0521rem;
    }
    margin-bottom: 0.1042rem;
    /deep/.el-checkbox__input.is-checked + .el-checkbox__label {
      color: #0fdd8d;
    }
  }
  .set_tijian {
    > p {
      font-size: 0.0938rem;
      color: #525252;
      margin-bottom: 0.0521rem;
    }
    /deep/.el-checkbox__input.is-checked + .el-checkbox__label {
      color: #0fdd8d;
    }
  }
}

/deep/.el-tag .el-icon-close {
  right: 0.3802rem;
}
.el-select {
  width: 100%;
  height: 0.2604rem;
}
/deep/.el-input .el-input__count .el-input__count-inner {
  background-color: #f7fbfc;
  line-height: 0.25rem;
}
/deep/.el-input > .el-input__inner {
  background-color: #f7fbfc;
  height: 0.2604rem;
}
/deep/.el-textarea > .el-textarea__inner {
  background-color: #f7fbfc;
  line-height: 0.1563rem;
}
/deep/.el-textarea .el-input__count {
  background-color: rgba($color: #000000, $alpha: 0);
}
.el-card.is-always-shadow,
.el-card.is-hover-shadow:focus,
.el-card.is-hover-shadow:hover {
  box-shadow: none;
}
/deep/.el-checkbox {
  margin-bottom: 10px;
}
</style>